<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><router-link to="/customer/customerVisit">客户拜访记录管理</router-link></el-breadcrumb-item>
        <el-breadcrumb-item>客户拜访详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <basic-container>
      <el-form style="padding: 40px;">
        <el-row :gutter="20" class="common-height">
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">客户编号：{{categoryForm.customerSn}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">客户：{{categoryForm.customerName}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">拜访联系人名称：{{categoryForm.linkmanName}}</div>         
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">拜访联系人地址：{{categoryForm.visitAddress}}</div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="common-height">
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">拜访日期：{{categoryForm.visitDate}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">拜访内容：{{categoryForm.visitContent}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">进展阶段：{{categoryForm.visitStep}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">拜访员工名称：{{categoryForm.employeeName}}</div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="common-height">
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">下次拜访时间：{{categoryForm.nextVisitTime}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">客户状态：{{categoryForm.customerStatus}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">执行状态：{{categoryForm.visitStatus}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">拜访总结：{{categoryForm.summaryContent}}</div>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="common-height">
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">抵达时间：{{categoryForm.arrivalTime}}</div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple text-left">离开时间：{{categoryForm.departureTime}}</div>
          </el-col>
          <el-col :span="6">
            <!-- <div class="grid-content bg-purple text-left">抵达地址定位：{{categoryForm.formattedAddress}}</div> -->
            <div class="grid-content bg-purple text-left">是否有抵达地址定位：{{categoryForm.arrivalPosition && categoryForm.arrivalPosition.length > 0 ? '是' : '否'}}</div>
          </el-col>
          <el-col :span="6">
            <!-- <div class="grid-content bg-purple text-left">离开地址定位：{{categoryForm.formattedAddress}}</div> -->
            <div class="grid-content bg-purple text-left">是否有离开地址定位：{{categoryForm.formattedAddress && categoryForm.arrivalPosition.length > 0 ? '是' : '否'}}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="common-height">
          <el-col :span="24">
            <div class="grid-content bg-purple text-left flex">
              <div>拜访图片：</div>
              <div v-if="categoryForm.photoList" class="thumbUrl m-l" v-for="(item,index) in categoryForm.photoList">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item.picUrl" 
                  :preview-src-list="[item.picUrl]"/>
              </div>
              <!-- <img v-for="(p, index) of categoryForm.photoList" :src="p.picUrl" @click="openPreview(index)"/> -->
            </div>
          </el-col>
        </el-row>
        <el-form-item>
          <div style="text-align: center;">
            <el-button type="default" size="medium" @click="close">返回</el-button>
          </div>
        </el-form-item>
      </el-form>
    </basic-container>
  </div>
</template>

<script>
  import Request from '../request.js'
  import { getStatusName } from '@/const/common/tool';
  import { getDetail } from '@/api/crm/customervisit';
  import {fetchDictAsync} from '@/util/util';
  import {remote} from '@/api/admin/dict';
  import { mapGetters } from 'vuex';
  export default {
    data() {
      return {
        categoryForm:{
          photoList:[],
          position:''
        },
        sleImg:false,
        //初始化坐标
        lnglat1: {
          P: 29.563761,
          R: 106.55046400000003,
        },
        lnglat2: {
          P: 29.563761,
          R: 106.55046400000003,
        },
        custmoerList:[],
        manList:[],
        visit_step:[],
        customer_status:[],
        visit_status:[],
        arrivalPosition:{
          formattedAddress:'',
          longitude:'',
          latitude:'',
        },
        departurePosition:{
          formattedAddress:'',
          longitude:'',
          latitude:'',
        }
      }
    },
    computed: {
      ...mapGetters(['tagWel', 'tagList', 'tag', 'website']),
      tagLen() {
        return this.tagList.length || 0
      }
    },
    created(){
      this.init();
    },
    methods: {
      async init(){
        await fetchDictAsync('scm_visit_step', this.visit_step);
        await fetchDictAsync('scm_customer_status', this.customer_status);
        await fetchDictAsync('scm_visit_status', this.visit_status);
        let params ={};
        params.visitId = JSON.parse(this.$route.query.res).id;
        getDetail(params).then(response => {
          this.categoryForm = response.data.data;
          let tmp1 =  response.data.data.arrivalPosition.split(',');
          let tmp2 =  response.data.data.departurePosition.split(',');
          this.lnglat1 = {P: Number(tmp1[1]),R:Number(tmp1[0])}
          this.lnglat2 = {P: Number(tmp2[1]),R:Number(tmp2[0])}
          this.arrivalPosition.longitude = Number(tmp1[0]);
          this.arrivalPosition.latitude = Number(tmp1[1]);
          this.departurePosition.longitude = Number(tmp2[0]);
          this.departurePosition.latitude = Number(tmp2[1]);
          this.categoryForm.visitStep = getStatusName(this.visit_step, this.categoryForm.visitStep);
          this.categoryForm.customerStatus = getStatusName(this.customer_status, this.categoryForm.customerStatus);
          this.categoryForm.visitStatus = getStatusName(this.visit_status, this.categoryForm.visitStatus);
        })
      },
      close(){
        var str_before = location.href.split('#')[1];
        let { tag, key } = this.findTag(str_before);
        this.$store.commit('DEL_TAG', tag);
        this.$router.go(-1);
      },
      findTag(value) {
        let tag, key
        this.tagList.map((item, index) => {
          if (item.value === value) {
            tag = item
            key = index
          }
        })
        return { tag: tag, key: key }
      },
      openPreview(index = 0) {
        this.$ImagePreview(this.datas, index);
      }
    }
  }
</script>

<style scoped lang="scss">
  .flex {
      display: flex;
  }
  .thumbUrl {
    display: inline-block;
  }
  .text-left {
    text-align: left;
    margin-left: 10px;
  }
  .crumbs{
    margin: 20px 10px;
  }
</style>


